import React, {Component} from 'react';
import {View, StyleSheet, Image, Alert, Text} from  'react-native';
import {Kaede} from 'react-native-textinput-effects';
import Main from './Main/Main';
let Dimension = require('Dimensions');
let totalWidth = Dimension.get('window').width;
let paddingLength = totalWidth / 9;
let buttonLength = paddingLength * 3;
export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userName: '',
            password: ''
        }
        this.updateID = this.updateID.bind(this);
        this.updatePassword = this.updatePassword.bind(this);
        this.onLogin = this.onLogin.bind(this)
    }

    //完整格式,state可不要
    updateID(newText) {
        this.setState((state) => {
            return {
                userName: newText,
            };
        });
    }

    //简写格式
    updatePassword(password) {
        this.setState({password})
    }

    onLogin() {
        // Alert.alert('账号' + this.state.userName + "，密码：" + this.state.password);
        const {navigator} = this.props;
        if (navigator) {
            navigator.push({
                name: 'Main',
                component: Main,
            })
        }
    }

    render() {
        return (
            <View style={styles.contain}>
                <Kaede label={'账号'} borderColor={'#b76c94'}
                       style={styles.numberInputStyle}
                       onChangeText={(newText)=>this.updateID(newText)}/>
                <Kaede label={'密码'} borderColor={'#b76c94'} password={true}
                       style={styles.passwordInputStyle}
                       onChangeText={this.updatePassword}/>
                <View style={styles.buttonView}>
                    <Text style={styles.buttonLoginStyle} onPress={this.onLogin}>
                        登录
                    </Text>
                    <Text style={styles.buttonRegisterStyle} onPress={this.onLogin}>
                        注册
                    </Text>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    contain: {
        flex: 1,
        backgroundColor: '#292929',
        flexDirection: 'column'
    },
    numberInputStyle: {
        top: 150,
    },
    passwordInputStyle: {
        top: 170,
    },
    buttonView: {
        top: 190,
        flexDirection: 'row'
    },
    buttonLoginStyle: {
        left: paddingLength,
        width: buttonLength,
        backgroundColor: '#06B9D1',
        fontSize: 21,
        textAlign: 'center',
    },
    buttonRegisterStyle: {
        left: paddingLength * 2,
        width: buttonLength,
        backgroundColor: '#06B9D1',
        fontSize: 21,
        textAlign: 'center',
    }
});